<template>
  <div class="">
    <el-row>
      <el-col :span="24">
        <el-menu
          default-active="1"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          :router="true">
          <el-menu-item index="1">维修列表</el-menu-item>
          <el-menu-item index="/index/wxkd">维修开单</el-menu-item>
          <el-menu-item index="/index/rescuekd">救援开单</el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
    <br>
    <br>
    <el-row>
      <el-col :span="12">
        <el-form :inline="true" :model="kh" class="demo-form-inline">
          <el-form-item label="车主" prop="username">
            <el-input :disabled="true" v-model="kh.username"></el-input>
          </el-form-item>
          <el-form-item label="车主信息" prop="isvip">
            <el-input :disabled="true" v-model="khxx"></el-input>
          </el-form-item>
          <el-form-item label="车牌号" prop="ulicense">
            <el-input :disabled="true" v-model="kh.ulicense"></el-input>
          </el-form-item>
          <el-form-item label="品牌" prop="vbrandname">
            <el-input :disabled="true" v-model="kh.vbrandname"></el-input>
          </el-form-item>
          <el-form-item label="驾驶员" prop="resdriver">
            <el-input :disabled="true" v-model="kh.resdriver"></el-input>
          </el-form-item>
          <el-form-item label="型号" prop="vtypename">
            <el-input :disabled="true" v-model="kh.vtypename"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="userphone">
            <el-input :disabled="true" v-model="kh.userphone"></el-input>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-table
          :default-sort="{ prop: 'pdate', order: 'descending' }"
          :data="this.pageInfo.list"
          border
        >
          <el-table-column width="100" label="序号">
            <template slot-scope="temp">
              {{ temp.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column width="120" prop="serviceType" label="单据类型">
          </el-table-column>
          <el-table-column
            width="150"
            label="状态"
            prop="servicestatename"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column width="300" prop="username" label="客户名称">
          </el-table-column>
          <el-table-column width="300" prop="ulicense" label="车牌号">
          </el-table-column>
          <el-table-column width="300" prop="userphone" label="手机号">
          </el-table-column>
          <el-table-column width="300" prop="repairbilldate" label="开单时间">
          </el-table-column>
          <el-table-column width="300" prop="repairbilldated" label="预计完工">
          </el-table-column>
          <el-table-column width="300" prop="receptionnote" label="备注">
          </el-table-column>
          <el-table-column label="操作" fixed="right">
            <template slot-scope="temp">
              <el-button
                icon="el-icon-search"
                size="mini"
                type="danger"
                @click="querykh(temp.row.repairbillid)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-pagination
          v-if="pageInfo.total != 0"
          :background="true"
          :pager-count="4"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageInfo.pageNum"
          :page-size="pageInfo.pageSize"
          :total="pageInfo.total"
          :page-sizes="[3,6,10]"
          layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    //这里存放数据
    return {
      kh: {},
      khxx: "",
      pageInfo: {},
      loading: true,
      isShow: false,
    };
  },
  //计算属性
  computed: {},
  //方法集合
  methods: {
    querykh(id) {
      let th = this;
      this.$http
        .get(`http://127.0.0.1:8080/api/rep/query/${id}`)
        .then((res) => {
          th.kh = res.data;
          th.khxx = th.kh.isvip == 0 ? "普通用户" : "会员用户";
        });
    },
    handleSizeChange(val) {
      this.goToPage(this.pageInfo.pageNum, val);
    },
    handleCurrentChange(val) {
      this.goToPage(val, this.pageInfo.pageSize);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;

      console.info(this.multipleSelection);
    },
    goToPage(p, s) {
      let _this = this;
      this.loading = true;
      this.$http
        .get("http://localhost:8080/api/rep", {
          params: {
            p: p,
            s: s,
          },
        })
        .then(function (resp) {
          _this.pageInfo = resp.data;
          _this.loading = false;
        });
    },
  },
  //挂载完成（可以访问DOM元素）
  mounted() {
    this.goToPage(1, 3);
  },
  //监控data中的数据变化
  watch: {},
};
</script>
<style  scoped>
/*@import url(); 引入公共css类*/
.wxhead {
  background: #ccc;
  height: 30px;
}
</style>